<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>09CSS넘침및배치</title>
	</head>

	<body>
		<h1>CSS넘침및배치</h1>
		<h2>내용 넘침:overflow</h2>
		<p>요소의 박스내 내용을 제어하는 방식에 대한 것</p>
		<p>visible:박스 밖 넘쳐나는 내용은 남겨둠</p>
		<p>hidden:박스 밖 넘쳐나는 내용은 잘라냄</p>
		<p>scroll: 박스 밖 넘쳐나는 내용은 잘리지만 스트롤바로 볼 수 있게함</p>
		<p>auto: 박스의  내용이 밖으로 넘쳐나는 경우 스크롤 바로 볼 수 있게 함</p>
		
		<div style="width: 250px;height: 150px; border: 1px solid navy; overflow:hidden">
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
		</div>
		
		<div style="width: 250px;height: 150px; border: 1px solid navy; overflow:scroll">
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
		</div>
		
		<div style="width: 250px;height: 150px; border: 1px solid navy; overflow: auto">
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
			<p>시간은 금이라구,친구!</p>
		</div>
		
		
		
		<h2 >요소의 수평배치:float</h2>
		<p>요소를 오른쪽/왼쪽에 배치할지를 결정</p>
		<p>주로 img태그에 사용하지만 레이아웃 배치에 유용하게 활용할 수 있음</p>
		<p >단,float속성을 해제할때는 clear 속성을 적용</p>
		<p>clear:left,right,both</p>
		
		<hr/>
		<div style="clear:both">
			<img src="images/suji3.jpg"  />
			<p style="width: 600px; border: 1px solid yellow; display: inline-block;position: relative" >
			취득세 영구인하를 주요 내용으로 하는 지방세법 개정안 시행은 가장 큰 호재다.
			이 법안에 따라 부동산 대책 발표일인 지난 8월28일 거래분부터 6억원 이하 주택은 2%에서 1%로,
			9억원 초과 주택은 4%에서 3%로 취득세가 소급 적용된다. 6억원 초과 9억원 이하 주택은 지금처럼 2%로 변동이 없다.
			주택시장에서 취득세 인하 한시 조치에 따라 거래량 증감이 두드러졌다는 점을 감안할 때 취득세 영구인하는 내년 주택시장에도 긍정적인 영향을 미칠 전망이다.

			하지만 이로 인해 거래가 갑자기 늘어나기는 힘들다는 반론도 있다.
			수도권 평균주택 가격인 3억2300만원(국민은행 11월 조사 기준)짜리 아파트를 구입할 경우 취득세는
			700만원 수준에서 300만원대로 줄지만 이 때문에 선뜻 주택 매입에 나서는 수요자는 많지 않다는 것이다. 
			</p >
		</div >
		
		<div style="clear:both">
			<img src="images/suji3.jpg" style="float: left" />
			<p style="width: 600px; border: 2px solid blue">
			취득세 영구인하를 주요 내용으로 하는 지방세법 개정안 시행은 가장 큰 호재다.
			이 법안에 따라 부동산 대책 발표일인 지난 8월28일 거래분부터 6억원 이하 주택은 2%에서 1%로,
			9억원 초과 주택은 4%에서 3%로 취득세가 소급 적용된다. 6억원 초과 9억원 이하 주택은 지금처럼 2%로 변동이 없다.
			주택시장에서 취득세 인하 한시 조치에 따라 거래량 증감이 두드러졌다는 점을 감안할 때 취득세 영구인하는 내년 주택시장에도 긍정적인 영향을 미칠 전망이다.

			하지만 이로 인해 거래가 갑자기 늘어나기는 힘들다는 반론도 있다.
			수도권 평균주택 가격인 3억2300만원(국민은행 11월 조사 기준)짜리 아파트를 구입할 경우 취득세는
			700만원 수준에서 300만원대로 줄지만 이 때문에 선뜻 주택 매입에 나서는 수요자는 많지 않다는 것이다. 
			</p>
			
		</div >
		
		<hr / style="clear:both">
		<div >
			<img src="images/suji3.jpg" style="float: right" />
			<span style="float: right; width: 600px; border: 2px solid blue">
			취득세 영구인하를 주요 내용으로 하는 지방세법 개정안 시행은 가장 큰 호재다.
			이 법안에 따라 부동산 대책 발표일인 지난 8월28일 거래분부터 6억원 이하 주택은 2%에서 1%로,
			9억원 초과 주택은 4%에서 3%로 취득세가 소급 적용된다. 6억원 초과 9억원 이하 주택은 지금처럼 2%로 변동이 없다.
			주택시장에서 취득세 인하 한시 조치에 따라 거래량 증감이 두드러졌다는 점을 감안할 때 취득세 영구인하는 내년 주택시장에도 긍정적인 영향을 미칠 전망이다.

			하지만 이로 인해 거래가 갑자기 늘어나기는 힘들다는 반론도 있다.
			수도권 평균주택 가격인 3억2300만원(국민은행 11월 조사 기준)짜리 아파트를 구입할 경우 취득세는
			700만원 수준에서 300만원대로 줄지만 이 때문에 선뜻 주택 매입에 나서는 수요자는 많지 않다는 것이다. 
			</span>
		</div>
		
	
		<hr / style="clear:both">
		
		
	</body>
</html>
